<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>获取和修改样式的信息</title>
        <meta name="auther" content="wangjiale"/>
        <meta name="description" content="A simper example"/>
        <link rel="shortcut icon" herf="favicon.ico" type="image/x-icon"/>
        <style title="core style">
            p{
                border:medium double black;
                background-color:lightgray;
            }
            #block1{
                color:white; border:thick solid black; background-color: gray;
            }
            table{border:thin solid black; border-collapse:collapse; margin:5px; float: left;}
            td{padding:2px;}
        </style>
    </head>
    <body>
        <p id="block1">
            There are lots of different kinds of fruil-there are over 500 
            varieties of banana alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
        <p id="block2">
            There are lots of different kinds of fruil-there are over 500 
            varieties of banana alone. By the time we add the countless 
            types of apples,oranges,and other well-known fruit,we are f
            aced with thousands of choices.
        </p>
        <div><button id="pressme">Press Me</button></div>
        <div id="placeholder"></div>
        <script>
            var placeholder=document.getElementById("placeholder");
            processStyleSheet();
            document.getElementById("pressme").onclick=function(){
                //第1个样式表.第2个样式.选择器文本
                document.styleSheets[0].cssRules.item(1).selectorText="#block2";
                if(placeholder.hasChildNodes()){
                    var childCount=placeholder.childNodes.length;
                    for(var i=0;i<childCount;i++){
                        placeholder.removeChild(placeholder.firstChild);
                    }
                }
                processStyleSheet();
            }
            function processStyleSheet(){
                var rulesList=document.styleSheets[0].cssRules;
                for(var i=0;i<rulesList.length;i++){
                    var rule=rulesList.item(i);
                    var newElem=document.createElement("table");
                    newElem.setAttribute("border","1");
                    addRow(newElem,"parentStyleSheet",rule.parentStyleSheet.title);
                    addRow(newElem,"selectorText",rule.selectorText);
                    addRow(newElem,"cssText",rule.cssText);
                    placeholder.appendChild(newElem);
                }
            }
            function addRow(elem,header,value){
                elem.innerHTML+="<tr><td>"+header+"</td><td>"+value+"</td></tr>";
            }
        </script>
    </body>
</html>